<template>
  <div id="rose-chart">
    <div class="rose-chart-title">消费轨迹 <span style="margin-left:5px">{{gettime}}</span> </div>
    <!-- <dv-charts :option="option" /> -->
    <dv-flyline-chart :dev="true" :config="option" style="width:100%;height:85%;" />
  </div>
</template>

<script>
  export default {
    name: 'RoseChart',
    data() {
      return {
        option: {},
        gettime:'',//当前时间
      }
    },
    created() {
      this.currentTime();    
    },
    methods: {
      currentTime(){
        setInterval(this.getTime,500)
      },
      getTime:function(){
        var _this = this;
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth()+1;
        let dd = new Date().getDate();
        let hh = new Date().getHours();
        let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
        let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
        _this.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
      },
      createData() {
        const {
          randomExtend
        } = this

        this.option = {
          centerPoint: [0.48, 0.35],
          points: [
            [0.71, 0.27],
            [0.46, 0.64],
            [0.68, 0.28],
            [0.61, 0.16],
            [0.53, 0.20],
            [0.37, 0.45],
            [0.17, 0.58],
            [0.34, 0.45],
            [0.15, 0.48],
            [0.63, 0.28],
            [0.27, 0.73],
            [0.27, 0.55],
            [0.78, 0.20],
            [0.58, 0.48],
            [0.59, 0.66],
            [0.60, 0.43],
            [0.68, 0.13]
          ],
          bgImgUrl: 'https://diandi-app.oss-cn-hangzhou.aliyuncs.com/app/user/map.png'
        }
      },
    },
    mounted() {
      const {
        createData
      } = this

      createData()

      setInterval(createData, 30000)
    }
  }
</script>

<style lang="less">
  #rose-chart {
    width: 30%;
    height: 100%;
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    box-sizing: border-box;

    .rose-chart-title {
      height: 50px;
      font-weight: bold;
      text-indent: 20px;
      font-size: 20px;
      display: flex;
      align-items: center;
    }

    .dv-charts-container {
      height: calc(~"100% - 50px");
    }
  }
</style>
